<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>战神 | 管理后台</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- bootstrap 3.0.2 -->
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!--ztree-->
    <link rel="stylesheet" href="/bootstrap/css/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
    <!-- font Awesome -->
    <link href="/bootstrap/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="/bootstrap/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="/bootstrap/css/AdminLTE.css" rel="stylesheet" type="text/css" />

    <!-- jQuery 2.0.2 -->
    <script src="/bootstrap/js/jquery.min.js"></script>
    <#--<script src="js/bootstrap-treeview.min.js"></script>-->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body class="skin-blue">
<!-- header logo: style can be found in header.less -->
<header class="header">

</header>
<div class="wrapper row-offcanvas row-offcanvas-left">
    <!-- Left side column. contains the logo and sidebar -->

    <!-- Right side column. Contains the navbar and content of the page -->
    <aside class="">
        <!-- Content Header (Page header) -->

        <!-- Main content -->
        <section class="content">
            <!-- general form elements -->
            <div class="col-md-4">
                <div class="box box-warning">
                    <div class="box-header">
                        <h3 class="box-title">权限树</h3>
                    </div>
                    <div class="box-body">
                        <ul id="treeview1" class="ztree">
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="box box-success">
                    <div class="box-header"><h3 class="box-title">操作</h3></div>
                    <div class="box-body">
                        <p><button type="button" id="btn_addsub" onclick="addsub()" class="btn btn-primary">加子节点>></button></p>
                        <p><button type="button" id="btn_modone" onclick="modone()" class="btn btn-default">修改>></button></p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="box box-primary">
                    <div class="box-header">
                        <h3 class="box-title">添加修改</h3>
                    </div><!-- /.box-header -->
                    <!-- form start -->
                        <div class="box-body">
                            <input type="hidden" name="submit" value="1">
                            <div class="form-group">
                                <label for="exampleInputEmail1">权限标签<small>(例如：sup:btn)</small></label>
                                <input type="text" name="tag" value="${tag!}" class="form-control" id="ei_tag" placeholder="请输入昵称">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">备注</label>
                                <textarea class="textarea" name="tagComment" value="${tagComment!}" id="ei_tagComment" placeholder="输入对权限标签的解释" style="width: 100%; height: 100px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
                            </div>
                        </div><!-- /.box-body -->

                        <div class="box-footer">
                            <button type="button" onclick="submitall()" class="btn btn-primary">Submit</button>
                        </div>
                </div>
            </div>
        </section><!-- /.content -->
    </aside><!-- /. -->
</div><!-- ./wrapper -->



<!-- Bootstrap -->
<script src="/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="/bootstrap/js/AdminLTE/app.js" type="text/javascript"></script>

<!--zTree-->
<script type="text/javascript" src="/bootstrap/js/ztree/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/bootstrap/js/ztree/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="/bootstrap/js/ztree/jquery.ztree.exedit.js"></script>

<script>
    var setting = {
        async: {
            enable: true,
            url: getUrl
        },
        view: {
            selectedMulti: false
        },
        edit: {
            enable: false,
            showRemoveBtn: false,
            showRenameBtn: false
        },
        data: {
            keep: {
                parent:true,
                leaf:true
            },
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeExpand: beforeExpand,
            onAsyncSuccess: onAsyncSuccess,
            onAsyncError: onAsyncError,
            onClick:onClick
        }
    };

    var zNodes =${treeJsonstr};

    function onClick(event, treeId, treeNode){
        checkpid=treeNode.id;
        check_tag=treeNode.tag;
        check_comment=treeNode.tagComment;
    }

    function getUrl(treeId, treeNode) {
        var param = "pid="+treeNode.id;
        return "subPermission.json?" + param;
    }
    function beforeExpand(treeId, treeNode) {
        if (!treeNode.isAjaxing) {
            ajaxGetNodes(treeNode, "refresh");
            return true;
        } else {
            alert("zTree 正在下载数据中，请稍后展开节点。。。");
            return false;
        }
    }
    function onAsyncSuccess(event, treeId, treeNode, msg) {
        if (!msg || msg.length == 0) {
            return;
        }
        var zTree = $.fn.zTree.getZTreeObj("treeview1");
        treeNode.icon = "";
        zTree.updateNode(treeNode);
    }
    function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
        var zTree = $.fn.zTree.getZTreeObj("treeview1");
        alert("异步获取数据出现异常。");
        treeNode.icon = "";
        zTree.updateNode(treeNode);
    }
    function ajaxGetNodes(treeNode, reloadType) {
        var zTree = $.fn.zTree.getZTreeObj("treeview1");
        if (reloadType == "refresh") {
            treeNode.icon = "/bootstrap/css/ztree/zTreeStyle/img/loading.gif";
            zTree.updateNode(treeNode);
        }
        zTree.reAsyncChildNodes(treeNode, reloadType, true);
    }

    $(document).ready(function(){
        $.fn.zTree.init($("#treeview1"), setting, zNodes);
    });


    ///
    var checkpid=0;
    var addormod=1;//1是加子节点，2是修改
    var errmsg='${result!}';
    var alertmsg='${msg!}';
    var check_tag='';
    var check_comment='';
    if(errmsg!=''){
        $('#ei_'+errmsg).parent().addClass("has-error");
    }
    if(alertmsg!=''){
        alert(alertmsg);
    }

    function addsub(){
        addormod=1;
        $('#btn_addsub').removeClass('btn-default');
        $('#btn_addsub').addClass('btn-primary');

        $('#btn_modone').removeClass('btn-primary');
        $('#btn_modone').addClass('btn-default');
        $('#ei_tagComment').val('');
        $('#ei_tag').val('');
    }
    function modone(){
        addormod=2;
        $('#btn_addsub').removeClass('btn-primary');
        $('#btn_addsub').addClass('btn-default');

        $('#btn_modone').removeClass('btn-default');
        $('#btn_modone').addClass('btn-primary');
        $('#ei_tagComment').val(check_comment);
        $('#ei_tag').val(check_tag);
    }

    function submitall(){
        if(checkpid==0){
            alert('请选择节点');
        }else if(addormod==0){
            alert('请选择“加子节点”或“修改当前节点”');
        }else{
            $.post("subpermission.json",{'pid':checkpid,'submit':addormod,'tag':$('#ei_tag').val(),'tagComment':$('#ei_tagComment').val()},function(data){
                if(data.result=='success'){
                    alert('操作成功');
                    window.location.reload();
                }else{
                    alert('操作失败');
                }
            });
        }
    }
</script>

</body>
</html>